<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
   <div id="container"></div>
   <button id="btn-change">change</button>

   

   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/tovnode.js"></script>
   <script>

       var  snabbdom=window.snabbdom

       //定义patch
       var patch=snabbdom.init([
           snabbdom_class,
           snabbdom_props,
           snabbdom_style,
           snabbdom_eventlisteners
       ])

       //定义h函数
       var h=snabbdom.h

       var data=[
          {
              name:'张三',
              age:'20',
              address:'北京'
          },{
              name:'李四',
              age:'21',
              address:'上海'
          },{
              name:'王五',
              age:'22',
              address:'广州'
          },
      ]

      data.unshift({
          name:'姓名',
          age:'年龄',
          address:'地址'
      })

       var container=document.getElementById('container')
       var btnChange=document.getElementById('btn-change')

       //渲染函数
       var vnode
       function render(data){
          var newVnode=h('table',{},data.map(function(item){
                var tds=[]
                var i
                for(i in item){
                    if (item.hasOwnProperty) {
                        tds.push(h('td',{},item[i]+''))
                    }
                }

                return h('tr',{},tds)
          }))


          if (vnode) {
              patch(vnode,newVnode)
          }else{
              //初次渲染
              patch(container,newVnode)
          }
          vnode=newVnode
       }


       //初次渲染
      
       render(data)

       btnChange.addEventListener('click',function(){
           //生成 newVnode
           data[1].age=30
           data[2].address='深圳'

           //re-render
           render(data)

       })


   </script>

</body>
</html>